<template>
<h1>El- 菜单组件</h1>

  <el-menu @select="handleSelect" mode="horizontal" background-color="lightblue" >
    <el-menu-item index="1"> 首页 </el-menu-item>
    <el-menu-item index="2"> 免费课 </el-menu-item>
    <el-menu-item index="3"> 直播课 </el-menu-item>
    <el-menu-item index="4"> 线上课 </el-menu-item>
    <el-menu-item index="5"> 脱产课 </el-menu-item>
    <el-sub-menu  index="6">
      <template #title> 关于我们 </template>
      <el-menu-item index="6-1"> 联系方式 </el-menu-item>
      <el-menu-item index="6-2"> 公司地址 </el-menu-item>
      <el-menu-item index="6-3"> 求职招聘 </el-menu-item>
    </el-sub-menu>
  </el-menu>

</template>

<script setup >
import { ref } from 'vue'
import {ElMessage} from "element-plus";

const handleSelect = (index, indexPath) => {
  console.log(index, indexPath)
  if(index == 3){
    ElMessage.success('直播课')
  }
}
</script>

<style scoped>

</style>